import { useRef, useEffect } from "react";
import * as echarts from 'echarts';
interface PropsType {
    lineX?: string[]
    lineY?: any[]
}


function LineEchart(props: PropsType) {
    const { lineX, lineY } = props
    const lineEchartRef = useRef<HTMLDivElement>(null);
    const myChart = useRef<echarts.ECharts | null>(null);
    useEffect(() => {
        myChart.current = echarts.init(lineEchartRef.current);
        const option = {
            grid: {
                left: '6%',
                right: '3%',
                bottom: '10%',
                top: '5%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            xAxis: {
                type: 'category',
                data: lineX || [],
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '汇总统计',
                    barWidth: 30,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(214, 49, 58, 0.1)'
                    },
                    itemStyle: {
                        color: '#EC979C'
                    },
                    data: lineY || [],
                    type: 'bar',
                }
            ]
        };
        option && myChart.current.setOption(option);

        // 页面尺寸变化自适应显示
        window.addEventListener('resize', () => {
            myChart.current?.resize();
        })

    }, [lineX])

    return (<div ref={lineEchartRef} style={{ width: '100%', height: '100%' }} ></div>);
}

export default LineEchart;